<template>
  <div id="map" style="width: 800px; height: 800px;"></div>

  <div id="my-panel"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
 

    let map = null;
 
    onMounted(() => {
      window._AMapSecurityConfig = {
        securityJsCode: "728ae0a3d2019dc3fecd368a2a64ef0d",
      };

      AMapLoader.load({
        key: 'e627fcdd91c3228449c3f930bee637df', // 高德地图API Key
        version: '2.0', // 指定API版本
        plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'], // 需要使用的插件
      }).then((AMap) => {
        map = new AMap.Map('map', {
          zoom: 11, // 初始缩放级别
          center: [116.397428, 39.90923], // 初始中心点坐标
        });

        //异步加载控件
        AMap.plugin("AMap.ToolBar", function () {
          var toolbar = new AMap.ToolBar(); //缩放工具条实例化
          map.addControl(toolbar);
        });

        // AMap.plugin(["AMap.PlaceSearch"], function () {
        //   const placeSearch = new AMap.PlaceSearch({
        //     pageSize: 5, //单页显示结果条数
        //     pageIndex: 1, //页码
        //     city: "010", //兴趣点城市
        //     citylimit: true, //是否强制限制在设置的城市内搜索
        //     map: map, //展现结果的地图实例
        //     panel: "my-panel", //结果列表将在此容器中进行展示。
        //     autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        //   });
        //  //在回调函数中使用插件功能
        //   placeSearch.search("北京大学", function (status, result) {
        //     console.log('result',result)
        //     //查询成功时，result 即对应匹配的 POI 信息
        //   });
        // });

        const points = [
          { keyword: "北京市地震局（公交站）", city: "北京" }, //起始点坐标
          { keyword: "亦庄文化园（地铁站）", city: "北京" }, //终点坐标
        ];


    AMap.plugin(["AMap.Driving"], function () {
      const driving = new AMap.Driving({
        map: map,
        panel: "my-panel",
      });
      //获取起终点规划线路
      driving.search(points, function (status, result) {
        if (status === "complete") {
          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
          //查询成功时，result 即为对应的驾车导航信息
          console.log('driver',result);
        } else {
          console.log("获取驾车数据失败：" + result);
        }
      });
    });



        //点标记显示内容
        const markerContent = `<div class="custom-content-marker">
        <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
        <div class="close-btn" onclick="clearMarker()">X</div>
        </div>`;


        const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
        const marker = new AMap.Marker({
          position: position,
          content: markerContent, //将 html 传给 content
          offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });

        map.add(marker);

        function clearMarker() {
          map.remove(marker); //清除 marker
        }
        document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件


        const pathArr = [
          [
            [
              [121.7789, 31.3102],
              [121.7279, 31.3548],
              [121.5723, 31.4361],
              [121.5093, 31.4898],
              [121.5624, 31.4864],
              [121.5856, 31.4547],
              [121.7694, 31.3907],
              [121.796, 31.3456],
              [121.7789, 31.3102],
            ],
          ],
        ];
        const polygon = new AMap.Polygon({
          path: pathArr, //多边形路径
          fillColor: "#ccebc5", //多边形填充颜色
          strokeOpacity: 1, //线条透明度
          fillOpacity: 0.5, //填充透明度
          strokeColor: "#2b8cbe", //线条颜色
          strokeWeight: 1, //线条宽度
          strokeStyle: "dashed", //线样式
          strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
        });

        //鼠标移入更改样式
        polygon.on("mouseover", () => {
          polygon.setOptions({
            fillOpacity: 0.7, //多边形填充透明度
            fillColor: "#7bccc4",
          });
        });
        //鼠标移出恢复样式
        polygon.on("mouseout", () => {
          polygon.setOptions({
            fillOpacity: 0.5,
            fillColor: "#ccebc5",
          });
        });


        map.add(polygon);

      }).catch((e) => {
        console.error(e);
      });
    });
 
</script>